<template>
  <div>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('clientVersionManage.basicInformation')" name="first">
          <el-form :inline="true" class="" label-position="right" label-width="115px">
            <el-form-item label="ID">
              {{ clientData.id }}
            </el-form-item>
            <el-form-item :label="$t('common.name')">
              {{ clientData.name }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.hardwareId')">
              {{ clientData.hardware_id }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.macAddress')">
              {{ clientData.mac_address }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.productModel')">
              {{ clientData.product_model }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.currentVersion')">
              {{ clientData.client_version }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.targetVersion')">
              {{ clientData.target_version_name }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.allowAccess')">
              <span v-if="clientData.enabled">{{ $t('clientVersionManage.yes') }}</span>
              <span v-else>{{ $t('clientVersionManage.no') }}</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('clientListManage.usage')" name="second">
          <el-form :inline="true" class="" label-position="right" label-width="165px">
            <el-form-item :label="$t('clientListManage.lastLoginUserId')">
              {{ clientData.last_login_user_id }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.lastLoginUserUUId')">
              {{ clientData.last_login_user_uuid }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.lastLoginUserName')">
              {{ clientData.last_login_user_name }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.lastConnectDesktop')">
              {{ clientData.last_connect_desktop }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.lastConnectDesktopName')">
              {{ clientData.last_connect_desktop_name }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.ownerId')">
              {{ clientData.owner_id }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.ownerName')">
              {{ clientData.owner_name }}
            </el-form-item>
            <el-form-item :label="$t('clientListManage.inventoryStatus')">
              <span v-if="clientData.need_check">{{ $t('clientListManage.notChecked') }}</span>
              <span v-else>{{ $t('clientListManage.checked') }}</span>
            </el-form-item>
            <el-form-item :label="$t('clientListManage.inventoryInfo')">
              {{ getClientInfo(clientData.inventory_info) }}
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="$t('clientListManage.otherInformation')" name="third">
          <el-form :inline="true" class="" label-position="right" label-width="130px">
            <el-form-item :label="$t('clientListManage.hardwareInfo')">
              <template>
                <el-popover
                  placement="right"
                  width="350"
                  trigger="hover">
                  <el-form label-position="right" >
                    <el-form-item :label="$t('objectType.' + v)" v-for="(k,v) in hardInfo" :key="v">
                      {{ k }}
                    </el-form-item>
                  </el-form>
                  <el-link slot="reference" :underline="false" type="primary">{{$t('common.details')}}</el-link>
                </el-popover>
              </template>
            </el-form-item>
            <el-form-item :label="$t('clientListManage.softwareInfo')">
              <template>
                <el-popover
                  placement="right"
                  width="350"
                  trigger="hover">
                  <el-form label-position="right" >
                    <el-form-item :label="$t('objectType.' + v)" v-for="(k,v) in softInfo" :key="v">
                      {{ k }}
                    </el-form-item>
                  </el-form>
                  <el-link slot="reference" :underline="false" type="primary">{{$t('common.details')}}</el-link>
                </el-popover>
              </template>
            </el-form-item>
            <el-form-item :label="$t('common.description')">
              {{ clientData.description }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.createdAt')">
              {{ myParseTime(new Date(clientData.created_at)) }}
            </el-form-item>
            <el-form-item :label="$t('clientVersionManage.updatedAt')">
              {{ myParseTime(new Date(clientData.updated_at)) }}
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import LinkButton from '../../../components/Basic/Button/LinkButton.vue';
import { parseTime } from "../../../utils/index"
export default Vue.extend({
  components: {
    LinkButton
  },
  props: {
    clientDetailData: Object
  },
  data() {
    return {
      clientData: {},
      activeName: 'first',
      hardInfo: '',
      softInfo: '',
    }
  },
  mounted() {
  },
  watch: {
    clientDetailData: {
      handler: function() {
        (this as any).clientData = this.clientDetailData;
        (this as any).transformHardInfo((this as any).clientData.hardware_info);
        (this as any).transformSoftInfo((this as any).clientData.software_info);
        (this as any).activeName = 'first';
      },
      immediate: true
    }
  },
  methods: {
    myParseTime(t: any) {
      return parseTime(t);
    },
    transformHardInfo(data: any) {
      const k = JSON.parse(data);
      (this as any).hardInfo = k
    },
    transformSoftInfo(data: any) {
      const k = JSON.parse(data);
      (this as any).softInfo = k
    },
    getClientInfo(info: any) {
      if (info) {
        return (JSON.parse(info)).info;
      }
    }
  }
})
</script>
<style lang="scss" scoped>

</style>
